<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>js lazyload实现网页图片延迟加载特效</title>
    <meta name="description" content="js图片特效随着浏览器滚动条滚动网页图片延迟加载，可控制页面某一位置图片是否开始加载。js代码。" />
</head>

<body>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        
        a,
        img {
            border: 0;
        }
        
        body {
            font-family: "helvetica neue", arial, sans-serif;
            font-size: 12px;
            color: #444;
        }
        
        .demo {
            width: 840px;
            margin: 0 auto;
        }
        
        .demo h2 {
            color: #3366cc;
            font-size: 16px;
            margin: 20px 0 0 0;
        }
        /* showbox */
        
        .showbox {
            float: left;
            margin: 10px 9px;
            display: inline;
        }
        
        .showpic {
            margin: 20px 0;
            border: solid 1px #ddd;
            width: 190px;
            font-size: 12px;
            background: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
            -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
            -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
        }
        
        .showpic .picbox {
            padding: 15px 15px 0;
            text-align: center;
        }
        
        .showpic p {
            line-height: 22px;
            margin: 10px 0 0 0;
            padding: 5px 10px;
            border-top: solid 1px #F5F2F2;
            background: #FAFAFA;
        }
    </style>

    <div class="demo">
        <h2>滚动条滚动 图片延迟加载</h2>
        <div style="height:700px;"></div>

        <div class="showbox">
            <div class="showpic">
                <div class="picbox">
                    <a href="http://www.17sucai.com/" target="_blank"><img height="150" width="150" alt="js树形导航菜单制作垂直js导航条特效" name="page_cnt_1" _src="images/small480f846f099a5892a0f1aee6170540ce.jpg" /></a>
                </div>
                <p>js树形导航菜单制作垂直js导航条特效</p>
            </div>
            <div class="showpic">
                <div class="picbox">
                    <a href="http://www.17sucai.com/" target="_blank"><img height="150" width="150" alt="js导航菜单左侧竖纵向二级导航菜单可点击展开与收缩子菜单" name="page_cnt_1" _src="images/small00da066c77f0ac26ff5aec5e5018feb5.jpg" /></a>
                </div>
                <p>js导航菜单左侧竖纵向二级导航菜单可点击展开与收缩子菜单</p>
            </div>
            <div class="showpic">
                <div class="picbox">
                    <a href="http://www.17sucai.com/" target="_blank"><img height="150" width="150" alt="flash图片特效3D立体动画焦点图片切换带左右按钮控制滚动" name="page_cnt_1" _src="images/smalld3fe5207f426ffea078c42aff95cfb13.jpg" /></a>
                </div>
                <p>flash图片特效3D立体动画焦点图片切换带左右按钮控制滚动</p>
            </div>
            <div class="showpic">
                <div class="picbox">
                    <a href="http://www.17sucai.com/" target="_blank"><img height="150" width="150" alt="flash焦点图片带内容与按钮的3D动画图片特效" name="page_cnt_1" _src="images/small46a2f920ee55bc8cfeab6d7bb75a4877.jpg" /></a>
                </div>
                <p>flash焦点图片带内容与按钮的3D动画图片特效</p>
            </div>
        </div>

        <div class="showbox">
            <div class="showpic">
                <div class="picbox">
                    <a href="http://www.17sucai.com/" target="_blank"><img height="150" width="150" alt="flash图片切换左右滚动带序列索引按钮控制flash动画图片特效" name="page_cnt_1" _src="images/small03c0020fa66f5a07b4ce0511dbe19331.jpg" /></a>
                </div>
                <p>flash图片切换左右滚动带序列索引按钮控制flash动画图片特效</p>
            </div>
            <div class="showpic">
                <div class="picbox">
                    <a href="http://www.17sucai.com/" target="_blank"><img height="150" width="150" alt="flash特效制作flash图片切换带有3D flash动画图片的切换效果" name="page_cnt_1" _src="images/smallfcfb4a9d8a54863c9e0b01d96d8ddcf1.jpg" /></a>
                </div>
                <p>flash特效制作flash图片切换带有3D flash动画图片的切换效果</p>
            </div>
            <div class="showpic">
                <div class="picbox">
                    <a href="http://www.17sucai.com/" target="_blank"><img height="150" width="150" alt="flash导航条制作一个鼠标滑过动画特效flash导航条源码下载" name="page_cnt_1" _src="images/smalleee9787ef98ca7eb735c3399a1d284d5.jpg" /></a>
                </div>
                <p>flash导航条制作一个鼠标滑过动画特效flash导航条源码下载</p>
            </div>
            <div class="showpic">
                <div class="picbox">
                    <a href="http://www.17sucai.com/" target="_blank"><img height="150" width="150" alt="flash导航条制作二级菜单子菜单的flash导航条源码" name="page_cnt_1" _src="images/smallee5978bd2682039e1d65aed3a8a02ab6.jpg" /></a>
                </div>
                <p>flash导航条制作二级菜单子菜单的flash导航条源码</p>
            </div>
        </div>

        <div class="showbox">
            <div class="showpic">
                <div class="picbox">
                    <a href="http://www.17sucai.com/" target="_blank"><img height="150" width="150" alt="jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果" name="page_cnt_1" _src="images/small8937f779ac932d157fe04fe463b083d4.jpg" /></a>
                </div>
                <p>jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果</p>
            </div>
            <div class="showpic">
                <div class="picbox">
                    <a href="http://www.17sucai.com/" target="_blank"><img height="150" width="150" alt="制作CSS3和HTML5的一个单页网站模板" name="page_cnt_1" _src="images/small9727df127970a3483f5bb363707d0027.jpg" /></a>
                </div>
                <p>制作CSS3和HTML5的一个单页网站模板</p>
            </div>
            <div class="showpic">
                <div class="picbox">
                    <a href="http://www.17sucai.com/" target="_blank"><img height="150" width="150" alt="jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3" name="page_cnt_1" _src="images/small6b87a0e9c81c16b2cd43bc4a2879c2d0.jpg" /></a>
                </div>
                <p>flash焦点图特效大图和小图按顺序切换效果，鼠标滑过小图对应大图3D flash图片切换效果，带左右按钮控制flash图片切换滚动。</p>
            </div>
            <div class="showpic">
                <div class="picbox">
                    <a href="http://www.17sucai.com/" target="_blank"><img width="150" height="150" alt="flash焦点图切换动画图片和标题文字配合显示含flash源码下载" name="page_cnt_1" _src="images/smallebd5b0ea178c42f9ac662086b9429f7c.jpg" /></a>
                </div>
                <p>flash焦点图切换效果带动画图片和标题文字显示切换过程，图片淡隐淡现flash特效简约性flash图片轮播含flash源码下载。</p>
            </div>
        </div>

        <div class="showbox">
            <div class="showpic">
                <div class="picbox">
                    <a href="http://www.17sucai.com/" target="_blank"><img height="150" width="150" alt="div+css教程网站建设门户网站和电子商务网站CSS样式表" name="page_cnt_1" _src="images/small376c7a03cb5dfb6f7435df7a9362dd7e.jpg" /></a>
                </div>
                <p>div+css教程网站建设门户网站和电子商务网站CSS样式表</p>
            </div>
            <div class="showpic">
                <div class="picbox">
                    <a href="http://www.17sucai.com/" target="_blank"><img height="150" width="150" alt="div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动" name="page_cnt_1" _src="images/smalla4c7c67dec86de131924d9e69e745e18.jpg" /></a>
                </div>
                <p>div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动</p>
            </div>
            <div class="showpic">
                <div class="picbox">
                    <a href="http://www.17sucai.com/" target="_blank"><img height="150" width="150" alt="CSS如何定位工程" name="page_cnt_1" _src="images/small6428e2143c097f6aac4b7676eda4a966.jpg" /></a>
                </div>
                <p>CSS如何定位工程</p>
            </div>
            <div class="showpic">
                <div class="picbox">
                    <a href="http://www.17sucai.com/" target="_blank"><img height="150" width="150" alt="div+css菜单导航布局自适应宽度" name="page_cnt_1" _src="images/small90724ace6d59438a97501738fa883651.jpg" /></a>
                </div>
                <p>div+css菜单导航布局自适应宽度</p>
            </div>
        </div>

    </div>

    <script type="text/javascript">
        (function() {

            var th = this;

            th.pageSize = 1000; /* 每屏大概高度为1000px */

            th.pageQuotiety = 0.5; /* 提前下载量 */

            th.imgName = "page_cnt_"; /* 图片通用名 */

            th.imgs = []; /* 每屏图片 [每屏所有图片，第一张图片，第一张图片绝对top:加载图片的top] */

            var B = {}; /* Browser check */

            B.ua = window.navigator.userAgent.toLowerCase();

            B.ie = /msie/.test(B.ua);

            B.moz = /gecko/.test(B.ua);

            B.opera = /opera/.test(B.ua);

            B.safari = /safari/.test(B.ua);

            var $N = function(s, docu) {
                var doc = docu ? docu : document;
                return (typeof s == "object") ? s : doc.getElementsByName(s);
            };

            th.getWindowSize = function() {
                var a = {};
                if (window.self && self.innerWidth) {
                    a.width = self.innerWidth;
                    a.height = self.innerHeight;
                    return a;
                }
                if (document.documentElement && document.documentElement.clientHeight) {
                    a.width = document.documentElement.clientWidth;
                    a.height = document.documentElement.clientHeight;
                    return a;
                }
                a.width = document.body.clientWidth;
                a.height = document.body.clientHeight;
                return a;
            }

            th.getObjPosition = function(obj) {
                var a = {};
                a.x = obj.offsetLeft, a.y = obj.offsetTop;
                while (obj = obj.offsetParent) {
                    a.x += obj.offsetLeft;
                    a.y += obj.offsetTop;
                }
                return a;
            }

            th._getPageScroll = function() {
                var s;
                if (typeof(window.pageYOffset) != "undefined") {
                    s = window.pageYOffset;
                } else if (document.documentElement && document.documentElement.scrollTop) {
                    s = document.documentElement.scrollTop;
                } else if (document.body) {
                    s = document.body.scrollTop;
                }
                return s;
            }

            th._loadImages = function(a) {
                if (!a) return;
                var obj = a;
                if (typeof a == "string") {
                    obj = $N(a);
                }
                for (var i = 0; i < obj.length; i++) {
                    var s = obj[i];
                    if (typeof s == "object") {
                        if (s.getAttribute("_src")) {
                            s.setAttribute("src", s.getAttribute("_src"));
                            s.removeAttribute("_src", 0);
                        }
                    }
                }
                delete obj;
                obj = null;
            }

            th._loadAllImgs = function() {
                var i = 0;
                while (th.imgs[i]) {
                    th._loadImages(th.imgs[i][0]);
                    i++;
                }
            }

            th.getImgPosition = function() {
                var i = 1;
                var p = $N(th.imgName + i);
                while (p && p.length > 0) {
                    var p = $N("page_cnt_" + i);
                    var t = th.getImgLoadPosition(p[0]);
                    th.imgs.push([p, p[0], t]);
                    i++;
                    p = $N(th.imgName + i);
                }
            }

            th.getImgLoadPosition = function(a) {
                var t = {
                    imgTop: 0,
                    pageTop: 0
                };
                if (a) {
                    var w = th.getWindowSize();
                    t.imgTop = parseInt(th.getObjPosition(a).y);
                    t.pageTop = parseInt((t.imgTop / 1000 - th.pageQuotiety) * 1000);
                }
                return t;
            }

            th._addScrollEven = function() {
                if (B.ie) {
                    window.attachEvent("onscroll", th._scrollFn);
                } else {
                    window.addEventListener("scroll", th._scrollFn, false);
                }
            }

            th._removeScrollEven = function() {
                if (B.ie) {
                    window.detachEvent("onscroll", th._scrollFn);
                } else {
                    window.removeEventListener("scroll", th._scrollFn, false);
                }
            }

            th._scrollFn = function() {
                var y = th._getPageScroll();
                var w = th.getWindowSize().height;
                if (w == 0) {
                    th._loadAllImgs();
                    return;
                }
                var i = 0;
                var j = 0;
                while (th.imgs[i]) {
                    if (!(y + w < th.imgs[i][2].pageTop)) {
                        th._loadImages(th.imgs[i][0]);
                        j++
                    }
                    i++;
                    if (j >= th.imgs.length) {
                        th._removeScrollEven();
                    }
                }
            }

            th.getImgPosition();
            th._addScrollEven();
            th._scrollFn();

        })()
    </script>
</body>

</html>